<template>
    <div id="app" class="footer">
        <div class="foot_bg">
            <div class="foot_top">
                <div class="foot_topa">
                    <img src="../assets/logo1.png" class="logo1">
                </div>
                <div class="foot_topa1">  </div>
                <div class="foot_topa foot_topb foot_topb1">
                    <div class="foot_tit">服务项目</div>
                    <div class="foot_xian"></div>
                    <div class="foot_text hovers" v-for="(item, index) in arrList" :key="index" @click="projects(item.id)">{{item.name}}</div>
                </div>
                <div class="foot_topa foot_topb">
                    <div class="foot_tit">联系我们</div>
                    <div class="foot_xian"></div>
                    <div class="foot_text"><span class="addressa">电话：</span>{{phone}}</div>
                    <div class="foot_text xiao address"><span class="addressa">地址：</span><span class="addressb">{{address}}</span></div>
                </div>
                <div class="foot_topa">
                    <div>
                        <img :src="erweima" class="foot_img2">
                    </div>
                    <div class="guanzhu">关注我们</div>
                </div>
            </div>
        </div>
        <div class="foot_bot">
            江苏尚新科技有限公司 <span class="codeh">{{beian}}</span>
        </div>
    </div>
</template>

<script>
export default {
  name: 'foo',
  data () {
    return {
        arrList:[],
        phone:'',//手机号
        address:'',//地址
        erweima:'',//二维码
        beian: '' //备案号
    }
  },
  mounted(){
    this.initData();
  },
  methods:{
     initData(){
        let that = this
        this.$http.post(this.$common.baseUrl + '/api/Guanwang/fwxm').then( res =>{
            if(res.data.code == 1){
                that.arrList = res.data.data;
            }else{
                layui.layer.msg(res.data.msg);
            }
        })
        this.$http.post(this.$common.baseUrl + '/api/Guanwang/lxwm').then( res =>{
            if(res.data.code == 1){
                that.phone = res.data.data[0].phone;
                that.address = res.data.data[0].address;
                that.erweima = that.$common.baseUrl + res.data.data[0].ewm_image;
                that.beian = res.data.data.beian.value;
            }else{
                layui.layer.msg(res.data.msg);
            }
        })
      },
      projects(id){
          var pataurl = this.$route.path;
          if(pataurl == "/projects"){
                this.$emit('showCityName',id);
          }else{
                this.$router.push({name:'projects', params: { id: id}})
          }

      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*{
    margin: 0;
    padding: 0;
}
.footer{
    color: #FFFFFF;
}
.foot_bg{
    width: 100%;
    background: url('../assets/bejing3.png') no-repeat;
    background-size: 100% 100%;
    padding: 3vw 0;
}
.foot_top{
    width:90%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto
}
.codeh{
  font-size: 15px;
}
.foot_topa{
    width: 20%;
    padding: 1vw 0;
}
.foot_topb{
    width: 25%!important;
    text-align: left;
}
.foot_topa1{
    height: 15vw;
    border-right: 1px solid #ffffff;
    margin:5vw 0 0 2vw;
}
.foot_topb1{
    padding-left: 8vw;
}
.logo1{
    width: 8vw;
    height: auto;
}
.foot_img2{
    width: 8vw;
    height: auto;
}
.foot_tit{
    font-size: 2.1vw;
}
.foot_xian{
    width: 5vw;
    border-bottom: 0.3vw solid #ffffff;
    margin: 1vw 0 2vw 0;
}
.guanzhu{
    margin-top: 1vw;
}
.foot_text{
    font-size: 1.2vw;
    line-height: 2.5vw;
}
.foot_topb1 .foot_text{
    text-indent: 1vw;
}
.address{
    display: flex;
    justify-content: flex-start;
}
.addressa{
    width: 5vw!important;
}
.addressb{
    width: 80%;
}
.hovers:hover{
    cursor: pointer;
    color: #0086CC;
}
.foot_bot{
    background: #242424;
    font-size: 1.5vw;
    padding: 3vw 0;
    letter-spacing: 0.08rem;
}



</style>
